<template>
    <div>

        <div class="page-header">
            <Row>
                <Col span="4" >
                    <Input v-model="aa" placeholder="入院人姓名" clearable style="width: 200px" />
                </Col>
                <Col span="4" class="xiao">
                    <Input v-model="bb" placeholder="入院人身份证号" clearable style="width: 200px" />
                </Col>
                <Col span="4" class="xiao">
                    <Input v-model="cc" placeholder="入院人电话号" clearable style="width: 200px" />
                </Col>
                <Col span="1" class="ruyuna">
                    <Button type="primary" class="chaxun" @click="chaxun()">查询入院人</Button>
                </Col>
                <Col span="2" class="sdsa">
                    <Button type="primary" class="tianjia" @click="tianjia()">办理入院</Button>
                </Col>
            </Row>
        </div>
           <div class="div2">
               <Row>
                   <Col span="24" class="lyx-mb10">
                       <Table border ref="selection" :columns="columns4" :data="data2" @on-selection-change="tableSelectChange">

                           <template slot-scope="{ row }" slot="name">
                               <strong>{{ row.name }}</strong>
                           </template>
                           <template slot-scope="{ row, index }" slot="cz">
                               <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">修改</Button>
                               <Button type="error" size="small" @click="remove(index)">删除</Button>

                           </template>

                       </Table>
                   </Col>
               </Row>
           </div>
            <div class="fenye">
                <Row type="flex" justify="space-between" class="lyx-mb10">
                    <Col span="12">
                        <!--   <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>
                            <Button @click="handleSelectAll(false)">取消</Button>-->
                    </Col>
                    <Col span="12">
                        <Page :total="100" show-total />
                    </Col>
                </Row>
            </div>
        <div class="tianjia">
            <Modal v-model="modal2" title="请添加"  width="60">

                <Row gutter="18" >
                    <div id="id1">
                        <Col span="10">
                            入院人姓名：       <Input v-model="obj.name" placeholder="入院姓名" clearable style="width: 200px" />
                        </Col>
                        <Col span="10">
<!--                            <Input v-model="obj.sex" placeholder="性别" clearable style="width: 200px" />-->
                            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：  <select v-model="obj.sex">
                            <option>男</option>
                            <option>女</option>
                        </select>

                        </Col>
                    </div>
                </Row>

                <Row gutter="18">
                    <div id="id2">
                        <Col span="10">
                            年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：   <Input v-model="obj.old" placeholder="年龄" clearable style="width: 200px" />
                        </Col>
                        <Col span="10">
                            身份证号：      <Input v-model="obj.idcard" placeholder="身份证号" clearable style="width: 200px" />
                        </Col>
                    </div>
                </Row>

                <Row gutter="18">
                    <div id="id3">

                        <Col span="10">

                            电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：<Input v-model="obj.tel" placeholder="电话" clearable style="width: 200px" />
                        </Col>
                        <Col span="10">
                            家庭住址：   <Input v-model="obj.dizhi" placeholder="家庭住址" clearable style="width: 200px" />
                        </Col>
                    </div>
                </Row>

                <Row gutter="18">
                    <div id="id4">

                        <Col span="10">

                            亲&nbsp;人&nbsp;电&nbsp;&nbsp;话：<Input v-model="obj.qintel" placeholder="亲人电话" clearable style="width: 200px" />
                        </Col>
                        <Col span="10">
                            入院时间：   <Input v-model="obj.date" placeholder="入院时间" clearable style="width: 200px" />
                        </Col>
                    </div>
                </Row>
                <Row gutter="18">
                    <div id="id5">

                        <Col span="10">

                            床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：<Input v-model="obj.chuanghao" placeholder="床号" clearable style="width: 200px" />
                        </Col>
                    </div>
                </Row>

            </Modal>
        </div>

<!--            <i-select :model.sync="model1" style="width:200px">-->
<!--                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
<!--            </i-select>-->
        <select v-model="obj.sex">
            <option>男</option>
            <option>女</option>
        </select>

    </div>
</template>

<script>
export default {
  data () {
    return {
      cityList: [
        {
          value: '性别',
          label: '男'
        },
        {
          value: '性别',
          label: '女'
        }
      ],
      model1: '',
      aa: '',
      ss: '',
      bb: '',
      cc: '',
      data2: [],
      modal2: false,

      columns4: [
        {
          title: '入院人姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 65,
          align: 'center'
        },
        {
          title: '年龄',
          key: 'old',
          width: 65,
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'idcard',
          width: 160,
          align: 'center'
        },
        {
          title: '电话',
          key: 'tel',
          width: 115,
          align: 'center'
        },
        {
          title: '入院人家庭住址',
          key: 'dizhi',
          width: 280,
          align: 'center'
        },
        {
          title: '亲人电话',
          key: 'qintel',
          width: 115,
          align: 'center'
        },
        {
          title: '入院时间',
          key: 'date',
          width: 100,
          align: 'center'
        },
        {
          title: '床号',
          key: 'chuanghao',
          width: 100,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'cz',
          width: 150,
          align: 'center'
        }
      ],
      data1: [
        {
          name: '李俊辉',
          sex: '男',
          old: '76',
          tel: '17640232587',
          idcard: '211222188502548747',
          dizhi: '辽宁省沈阳市和平区抚顺路54-1',
          qintel: '1764521023',
          date: '2019-09-03',
          chuanghao: '5号楼3-2-2'

        },
        {
          name: '王淑琴',
          sex: '女',
          old: '82',
          tel: '15898256321',
          idcard: '211222188002541235',
          dizhi: '辽宁省沈阳市沈北新区道义路28号',
          qintel: '1762052123',
          date: '2019-09-03',
          chuanghao: '4号楼3-2-2'

        },
        {
          name: '刘新辉',
          sex: '男',
          old: '86',
          tel: '17640258987',
          idcard: '21122218890235124',
          dizhi: '辽宁省沈阳市和平区西塔街道52-1',
          qintel: '1764521023',
          date: '2019-09-03',
          chuanghao: '1号楼3-2-2'

        },
        {
          name: '吴艳丽',
          sex: '女',
          old: '90',
          tel: '17640232031',
          idcard: '21122218850218',
          dizhi: '辽宁省沈阳市和平区市府大路21号',
          qintel: '1764528888',
          date: '2019-09-03',
          chuanghao: '4号楼3-2-2'

        }
      ],
      obj: {

        name: '',
        sex: '',
        old: '',
        idcard: '',
        tel: '',
        dizhi: '',
        qintel: '',
        date: '',
        chuanghao: ''
      }

    }
  },
  methods: {
    remove (index) {
      if (confirm('确定要删除吗') === true) {
        this.data1.splice(index, 1)
      }
    },
    tianjia () {
      // this.obj.name = ''
      // this.obj.sex = ''
      // this.obj.old = ''
      // this.obj.idcard = ''
      // this.obj.tel = ''
      // this.obj.dizhi = ''
      // this.obj.qintel = ''
      // this.obj.date = ''
      // this.obj.chuanghao = ''
      this.data2.push(this.obj)
      this.modal2 = true
    },
    chaxun () {
      //  支持模糊查询
      //  this.xmgcqkJsonsData：用于搜索的总数据
      this.data2 = []
      let search = this.aa
      let search2 = this.bb
      let search3 = this.cc
      // console.log(aaaaaaaaaaaaaaaaaaaaa,search)

      let newListData = [] //  用于存放搜索出来数据的新数组
      if (search && search2 && search3) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1 && item.idcard.indexOf(search2) !== -1 && item.tel.indexOf(search3) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search2) {
        this.data1.filter(item => {
          if (item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search3) {
        this.data1.filter(item => {
          if (item.tel.indexOf(search3) !== -1) {
            newListData.push(item)
          }
        })
      } else {
        this.data2 = this.data1
      }
      /* this.data1 = newListData */
      newListData.filter(item => {
        this.data2.push(item)
      })
      // console.log(newListData)
    }

  },
  created () {
    this.data2 = this.data1
  }

}
</script>

<style scoped>
.xiao{
    margin-left: 10px;
}
    .sdsa{
        margin-left: 55px;
    }
    .div2{
        margin-top: 20px;
    }
    .fenye{
        margin-top: 20px;
    }
    .ruyuna{
        margin-left: 10px;
    }
    #id1{

    }
    #id2{
        margin-top: 10px;

    }
    #id3{
        margin-top: 10px;

    }
    #id4{
        margin-top: 10px;

   }
   #id5{
       margin-top: 10px;

   }

</style>
